import { ref, onMounted } from 'vue';

export const usePlainTable = () => {
    const pageSize = ref<number>(10);
    const currentPage = ref<number>(1);
    const totalLength = ref<number>(100);
    const data = ref<any>(
        Array.from({ length: totalLength.value }, (_, index) => ({
            name: `name ${index}`,
            age: Math.floor(Math.random() * 100),
        }))
    );
    const showData = ref<any>()
    const handleSizeChange = () => {
        const start = pageSize.value * (currentPage.value - 1)
        const end = pageSize.value * currentPage.value
        showData.value = data.value.slice(start, end)
    }
    onMounted(() => {
        handleSizeChange()
    })

    // 可以返回数组，数组结构比较方便重命名，但是解构的值需要按顺序获取
    // return [
    //     pageSize,
    //     currentPage,
    //     totalLength,
    //     showData,
    //     handleSizeChange
    // ]

    // 可以通过 toRefs 把返回的数据快速创建多个ref对象，并在解构后使用时不丢失其响应性和与原先数据的关联性
    // return {...toRefs(data)}

    // 返回对象可以按需解构
    return {
        pageSize,
        currentPage,
        totalLength,
        showData,
        handleSizeChange
    }
} 